<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="抽奖活动名称" prop="name">
        <el-input v-model="form.name" placeholder="活动名称" maxlength="30" class="col"></el-input>
      </el-form-item>
      <el-form-item  label="单人当天免费抽奖次数" prop="freeFrequency">
        <el-input v-model="form.freeFrequency" placeholder="次数" maxlength="10" type="number" class="col"></el-input>
      </el-form-item>
      <el-form-item  label="单人当天抽奖次数" prop="dayLimit">
        <el-input v-model="form.dayLimit" placeholder="次数" maxlength="10" type="number" class="col"></el-input>
      </el-form-item>
      <el-form-item  label="抽奖所需积分" prop="consumptionPoints">
        <el-input v-model="form.consumptionPoints" placeholder="若不需积分则添0" maxlength="10" type="number" class="col"></el-input>
      </el-form-item>
      <el-form-item  label="抽奖所需券" prop="consumptionVoucher">
        <el-input v-model="form.consumptionVoucher" placeholder="若不需积分则添0" maxlength="10" type="number" class="col"></el-input>
      </el-form-item>
      <el-form-item label="活动描述" prop="description">
        <el-input v-model="form.description" placeholder="活动描述" maxlength="100" class="col"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
            v-model="form.startTime"
            type="date"
            placeholder="开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" class="col">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
            v-model="form.endTime"
            type="date"
            placeholder="结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" class="col">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary" @click="handlerSubmit" v-has-permi="['admin:image:save']">保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {detail, save} from "@/api/draw";
import {getForm} from "@/utils/utils";

export default {
  props:{
    id:{
      default:null
    }
  },
  data(){
    return{
      form:{
        id:null,
        dayLimit:'',
        name:'',
        sort:0,
        integral:'',
        singleLimit:'',
        startTime:'',
        endTime:'',
        description:'',
        freeFrequency:'',
        consumptionPoints:0,
        consumptionVoucher:0,
      },
      rules:{
        integral: [{ required: true, message: '请填写抽奖积分', trigger: ['blur'] }],
        name: [{ required: true, message: '请填写标题', trigger: ['blur'] }],
        freeFrequency: [{ required: true, message: '请填写单人当天免费抽奖次数', trigger: ['blur'] }],
        dayLimit: [{ required: true, message: '请填写单人当天抽奖次数', trigger: ['blur'] }],
        startTime: [{ required: true, message: '请选择开始时间', trigger: ['blur'] }],
        endTime: [{ required: true, message: '请选择结束时间', trigger: ['blur'] }],
        description: [{ required: true, message: '请填写活动描述', trigger: ['blur'] }],
      },
      roles:[],
      saveLoading:false,
      formLoading:false,
      uploads:{
        show:false,
        multiple:false,
      },
      typeList:[{id:0,name:"积分抽奖"},{id:1,name:"次数抽奖"},]
    }
  },
  mounted() {
    if(this.id){
      this.getDetail();
    }
  },
  methods:{
    handleChange(value) {
      console.log(value);
    },
    getDetail(){
      this.formLoading=true
      detail(this.id).then(res=>{
        getForm(res,this.form);
      }).finally(()=>{
        this.formLoading=false;
      })
    },
    handlerSubmit(){
      if(this.saveLoading||this.formLoading){
        return;
      }
      this.$refs.form.validate(valid=>{
        if(!valid)return;
        this.saveLoading=true;
        save(this.form).then(()=>{
          this.$message.success('保存成功');
          this.close();
        }).finally(()=>{
          this.saveLoading=false
        })
      })
    },
    close(){
      this.$emit('hideEditDialog')
    }
  }
}
</script>
<style lang="scss" scoped>

.col{
  width: 450px;
}
</style>
